<template>
  <div class="bg">
    <div class="header"></div>
    <div class="middle">
      <div class="left">
        <LeftMenu></LeftMenu>
      </div>
      <div class="right">
        <UserList v-if="tabPosition == 0"></UserList>
        <AddTool v-else-if="tabPosition == 1"></AddTool>
        <AddAdminUser v-else-if="tabPosition == 2"></AddAdminUser>
        <ToolManager v-else-if="tabPosition == 3"></ToolManager>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import LeftMenu from "../components/admin/LeftMenu";
import UserList from "../components/admin/UserList";
import AddTool from "../components/admin/AddTool";
import AddAdminUser from "../components/admin/AddAdminUser";
import ToolManager from "../components/admin/ToolManager";



export default {
  name: "Login",
  components: {
    LeftMenu,
    UserList,
    AddTool,
    AddAdminUser,
    ToolManager
  },
  data() {
    return {
      tabPosition: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
html,
body {
  height: 100%;
}
.bg {
  height: 100%;
}
.header {
  width: 100%;
  height: 50px;
  background: gray;
}
.middle {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 100%;
  .left {
    width: 260px;
    height: 100%;
  }
  .right {
    flex: 1;
  }
}
</style>